<template>
  <div>
    <el-form
      ref="admissionForm"
      :model="admissionInfo"
      :class="required == '1' ? 'require' : 'notRequire'"
      label-position="right"
      label-width="120px"
      size="small"
      :rules="admissionRules"
    >
      <el-row type="flex" justify="end" class="button-save">
        <el-button type="primary" @click="save">保存</el-button>
      </el-row>
      <el-row class="hospitalized">
        <el-form-item label="发病时间" class="item" prop="incidentDateTime">
          <el-date-picker
            v-model="admissionInfo.incidentDateTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
          />
        </el-form-item>
        <el-form-item label="费别" class="item" prop="costCat">
          <el-select v-model="admissionInfo.costCat" clearable>
            <el-option label="自费" value="自费" />
            <el-option label="公费" value="公费" />
            <el-option label="军免" value="军免" />
            <el-option label="当地社保" value="当地社保" />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row class="hospitalized">
        <el-form-item label="来院时间" class="item" prop="arrivalTime">
          <el-date-picker
            v-model="admissionInfo.arrivalTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
          />
        </el-form-item>
        <el-form-item label="绿色通道" class="item" prop="greenType">
          <el-select v-model="admissionInfo.greenType" clearable>
            <el-option label="胸痛" value="胸痛" />
            <el-option label="卒中" value="卒中" />
            <el-option label="创伤" value="创伤" />
            <el-option label="呼吸" value="呼吸" />
            <el-option label="孕产妇" value="孕产妇" />
            <el-option label="新生儿" value="新生儿" />
            <el-option label="中毒" value="中毒" />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row class="hospitalized">
        <!-- <el-form-item label="绑定手环">
          <el-input v-model="admissionInfo.vals" placeholder="" />
        </el-form-item>
        <el-button size="small" type="info" plain class="button-binding">绑定</el-button>

        <el-form-item label="分配车/床">
          <el-input v-model="admissionInfo.vals" placeholder="" />
        </el-form-item>
        <el-button size="small" type="info" plain class="button-binding">绑定</el-button> -->

        <el-form-item
          v-if="
            modeOfArrivalList.filter(
              (item) => item.greenType == admissionInfo.greenType
            ).length > 0
          "
          label="来院方式"
          class="item"
          prop="modeOfArrival"
        >
          <el-select v-model="admissionInfo.modeOfArrival">
            <el-option
              v-for="mode in modeOfArrivalList.filter(
                (item) => item.greenType == admissionInfo.greenType
              )"
              :key="'modeOfArrival' + mode.key"
              :label="mode.value"
              :value="mode.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="
            admissionInfo.modeOfArrival == '9' ||
            admissionInfo.modeOfArrival == '3'
          "
          label="自行来院"
          class="item"
          prop="modeOfArrivalType"
        >
          <el-select v-model="admissionInfo.modeOfArrivalType" clearable>
            <el-option label="步行" value="自行来院(步行)" />
            <el-option label="轮椅" value="自行来院(轮椅)" />
            <el-option label="扶走" value="自行来院(扶走)" />
          </el-select>
        </el-form-item>
        <el-form-item label="群伤事件" class="item" prop="massType">
          <el-radio-group v-model="admissionInfo.massType">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getHospitalized, saveHospitalized } from '@/api/triage/triage-new'
export default {
  name: 'TriageHospitalized',

  props: {
    id: {
      type: Object,
      default: () => {}
    },
    require: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      admissionInfo: {
        massType: 0
      },
      required: '',
      modeOfArrivalList: [
        { key: '1', value: '呼救（120或其它）出车', greenType: '胸痛' },
        { key: '2', value: '转院（包含任何医疗机构）', greenType: '胸痛' },
        { key: '3', value: '自行来院', greenType: '胸痛' },
        { key: '4', value: '院内发病', greenType: '胸痛' },
        { key: '6', value: '本院急救车', greenType: '卒中' },
        { key: '7', value: '当地120', greenType: '卒中' },
        { key: '8', value: '外院转院来院', greenType: '卒中' },
        { key: '9', value: '自行来院', greenType: '卒中' }
      ],
      admissionRules: {
        incidentDateTime: null,
        costCat: null,
        arrivalTime: null,
        greenType: null,
        modeOfArrival: null,
        modeOfArrivalType: null,
        massType: null
      }
    }
  },

  created() {
    this.getHospitalized()
    this.setRequire()
  },
  methods: {
    getHospitalized() {
      getHospitalized(this.id).then((res) => {
        if (res.code == 0) {
          this.admissionInfo = res.data
        }
      })
    },
    setRequire() {
      if (this.require.length > 0) {
        this.required = this.require[0].value
        if (this.required !== '2') {
          Object.keys(this.admissionRules).forEach((el) => {
            this.admissionRules[el] = [
              {
                required: true,
                message: ' ',
                trigger: 'blur'
              }
            ]
          })
        } else {
          Object.keys(this.admissionRules).forEach((el) => {
            this.admissionRules[el] = null
          })
        }
      }
    },
    save() {
      this.$nextTick(() => {
        this.$refs.admissionForm.validate((valid) => {
          if (!valid && this.required == '1') {
            this.$message.error('请通过验证')
          } else {
            saveHospitalized(this.admissionInfo).then((res) => {
              if (res.code == 0) {
                this.$message.success('保存成功')
                this.getHospitalized()
              } else {
                this.$message.error('保存失败')
              }
            })
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.hospitalized {
  .el-form-item--small.el-form-item {
    margin-bottom: 22px;
  }

  .item {
    float: left;
  }
  .el-form-item {
    width: 370px;
    .el-input {
      width: 100%;
    }
    .el-select {
      width: 100%;
    }
  }
}
.hospitalized-binding {
  .el-form-item {
    width: 308px;
    .el-select {
      width: 188px;
    }
    .el-input {
      width: 188px;
    }
  }
}
.button-save {
  padding-right: 40px;
  margin-bottom: 20px;
}
.button-binding {
  margin-right: 36px;
}
</style>

<style lang="scss">
.notRequire {
  .el-form-item.is-error .el-input__inner {
    border-color: #dcdfe6;
  }
}
</style>